<template>
  <div>
    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
      <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">管理控制台</h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">欢迎使用南洋学院内容管理系统</p>
      </div>
      <div class="border-t border-gray-200">
        <dl>
          <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">当前用户</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ userInfo.nickname || userInfo.username }}</dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">权限</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <div v-if="userInfo.permissions && userInfo.permissions.length > 0">
                <span v-for="(permission, index) in userInfo.permissions" :key="index"
                      class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-red-100 text-red-800 mr-2 mb-2">
                  {{ permission }}
                </span>
              </div>
              <div v-else>无权限</div>
            </dd>
          </div>
          <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">最后登录IP</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ userInfo.lastLoginIp || '未知' }}</dd>
          </div>
          <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">登录时间</dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ loginTime }}</dd>
          </div>
        </dl>
      </div>
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      <!-- 文章管理卡片 -->
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-[#C32A31] rounded-md p-3">
              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
              </svg>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">文章管理</dt>
                <dd>
                  <div class="text-lg font-medium text-gray-900">管理网站文章内容</div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-4 sm:px-6">
          <div class="text-sm">
            <router-link to="/admin/articles" class="font-medium text-[#C32A31] hover:text-[#991E29]">
              查看全部文章
            </router-link>
          </div>
        </div>
      </div>

      <!-- 新建文章卡片 -->
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-[#C32A31] rounded-md p-3">
              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
              </svg>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">新建文章</dt>
                <dd>
                  <div class="text-lg font-medium text-gray-900">创建新的文章内容</div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-4 sm:px-6">
          <div class="text-sm">
            <router-link to="/admin/articles/create" class="font-medium text-[#C32A31] hover:text-[#991E29]">
              创建新文章
            </router-link>
          </div>
        </div>
      </div>

      <!-- 返回前台卡片 -->
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-[#C32A31] rounded-md p-3">
              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">返回前台</dt>
                <dd>
                  <div class="text-lg font-medium text-gray-900">查看网站前台页面</div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-4 sm:px-6">
          <div class="text-sm">
            <a href="/" class="font-medium text-[#C32A31] hover:text-[#991E29]">
              前往网站首页
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import request from '../../utils/request';

// 用户信息
const userInfo = reactive({
  username: '',
  nickname: '',
  avatar: '',
  lastLoginIp: '',
  permissions: []
});

// 登录时间
const loginTime = ref(new Date().toLocaleString());

// 获取用户信息
onMounted(async () => {
  const token = localStorage.getItem('admin_token');
  if (!token) {
    return;
  }

  try {
    // 使用axios从后端获取用户信息
    const result = await request.get('/api/user/info');

    if (result.code === 200) {
      const userData = result.data;
      userInfo.username = userData.username || '';
      userInfo.nickname = userData.nickname || '';
      userInfo.avatar = userData.avatar || '';
      userInfo.lastLoginIp = userData.lastLoginIp || '未知';
      userInfo.permissions = userData.permissions || [];
    }

    // 获取用户权限信息
    const permissionResult = await request.get('/api/user/permission');
    if (permissionResult.code === 200) {
      userInfo.permissions = permissionResult.data.permissions || [];
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
});
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
